<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="box" id="box1" name="xuning">
        <ul>
            <li>11111</li>
            <li>22222</li>
            <li>22222</li>
        </ul>
    </div>
    <hr>  
    <div class="header"><ul><li>1111</li><li>2222</li></ul></div>
    <script>
        // 一.高级dom操作
        // 1.节点.节点(node)对象.标签.div元素节点 class="box"属性节点
        // 2.节点可以分为元素节点,属性节点,文本节点,他们分别用不同的数字代表类型
        // 3.每一个节点都有3个非常重要的属性:nodeType节点类型.nodeValue节点的值 nodeName节点名字

        // var box=document.querySelector('.box');
        // console.log(box.nodeType);//1
        // console.log(box.nodeValue);//null
        // console.log(box.nodeName);//DIV
        // | -        | nodeType | nodeName   | nodeValue |
        // | -------- | -------- | ---------- | --------- |
        // | 元素节点 | 1        | 大写标签名 | null      |
        // | 属性节点 | 2        | 属性名     | 属性值    |
        // | 文本节点 | 3        | \#text     | 文本内容  |

        // 4.childNodes获取当前元素节点的所有的子节点,里面会包含空白节点(换行),返回类数组
        // var box=document.querySelector('.box');
        // console.log(box.childNodes);
        // console.log(box.childNodes.length);
        // console.log(box.childNodes[0]);
        // var header=document.querySelector('.header');
        // console.log(header.childNodes);

        // 5.children:获取某一节点下面的所有子一级 *元素节点*
        // var box=document.querySelector('.box');
        // console.log(box.children[0]);
        // console.log(box.children.length);
        // var header=document.querySelector('.header');
        // console.log(header.children);    

        // 6.操作文本节点
        // var box=document.querySelector('.box');
        // console.log(document.body.childNodes[1].childNodes[1].childNodes[1].childNodes[0]);

        // 7.操作属性节点
        // console.log(document.body.childNodes[1].attributes[0].nodeValue);

        // 8.parentNode 获取当前节点的父节点
        // var box=document.querySelector('.box');
        // console.log(box.parentNode);//body
        // console.log(box.parentNode.parentNode);//html
        // console.log(box.parentNode.parentNode.parentNode);//document
        // console.log(box.parentNode.parentNode.parentNode.parentNode);//null


    </script>
</body>
</html>